<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	// #ifdef APP-PLUS
	// const openinstall = uni.requireNativePlugin('openinstall-plugin') || null;
	// #endif
	export default {
		globalData: {
			videoCategory: uni.getStorageSync('videoCategory') || [],
		},
		methods: {},
		onLaunch: function() {
			console.log('App Launch111');
			const that = this;
			//监听网络
			//#ifndef H5
			uni.getNetworkType({
				success: function(res) {
					console.log('uni.getNetworkType');
					console.log(JSON.stringify(res, undefined, '/t'));
					let networkType = res.networkType;
					let data = {
						networkType: networkType,
						isConnected: networkType == 'none' ? false : true
					};
					if (networkType == 'none') {
						that.$common.showTip('无法链接网络，请检查wifi或者移动数据网络是否正常！', 'none');
					}
					that.$store.dispatch('setNetwork', data);
				}
			});
			// const clientid = plus.push.getClientInfo().clientid;
			// console.log('推送cid:' + clientid);
			uni.onNetworkStatusChange(function(res) {
				const tips = res.isConnected ? `当前网络是${res.networkType}` : '当前没有网络';
				that.$common.showTip(tips, 'none');
				that.$store.dispatch('setNetwork', res);
			});
			// #endif

			//手机型号信息
			uni.getSystemInfo().then(data => {
				let [err, res] = data;
				if (res) {
					console.log(res);
					console.log('res: ' + JSON.stringify(res));
					res.isIos = res.platform == 'ios' ? true : false;
					that.$store.dispatch('setSystemInfo', res);
				}
			});
		},
		onShow: function() {
			console.log('App Show');
		},
		onHide: function() {
			console.log('App Hide');
		}
	};
</script>

<style lang="scss">
	/* 注意声明lang="scss"！ */
	@import '@/common/css/common.scss';
	@import 'uview-ui/index.scss';

	// top: calc(var(--window-top) + 44px + var(--status-bar-height));
	page {
		background: #f5f5f5;
	}

	.flex {
		display: flex;
	}

	.navtop {
		color: #000;

		&-left,
		&-item {
			padding: 0 16rpx;

			.icon {
				width: 18px;
				height: 18px;
				vertical-align: middle;
			}

			text {
				height: 20px;
				line-height: 20px;
				display: inline-block;
				overflow: hidden;
				font-size: 13px;
				vertical-align: middle;

				&.txt-hide {
					max-width: 50px;
				}
			}
		}

		&-content {
			width: 100%;
		}

		&-right {
			padding: 0 10px;

			.icon {
				width: 20px;
				height: 20px;
			}
		}
	}

	.swiper-wrap {
		padding: 22rpx 30rpx;
	}

	.navlist {
		.flex {
			justify-content: space-between;
		}

		.nav-item {
			width: 25%;
			padding: 20rpx 0;
			text-align: center;

			.icon {
				width: 60rpx;
				height: 60rpx;
			}

			.name {
				font-size: 13px;
				color: $uni-text-color;
				height: 60rpx;
				line-height: 60rpx;
			}
		}
	}

	.tabs {
		width: 100%;
		background: $uni-bg-color-grey;
		position: fixed;
		left: 0;
		z-index: 999;
	}

	.col-green {
		color: $color-green;
	}

	.col-yel {
		color: $color-yel;
	}

	.col-yel2 {
		color: $color-yel2;
	}

	.price {
		color: $color-red;

		text {
			font-size: 18px;
		}
	}

	.col-yel3 {
		color: $color-yel3;
	}

	.uses-add-list {
		.item {
			background: $uni-bg-color-grey;
		}
	}

	.popup {
		padding: 20rpx 30rpx;

		&-head {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 0;

			.title {
				font-size: 17px;
				font-size: bold;
			}

			.close-text {
				color: #999;
				font-size: 15px;
			}

			.confirm-text {
				color: $color-yel2;
				font-size: 15px;
			}
		}

		.btnbox {
			position: fixed;
			bottom: 20rpx;
			width: 100%;
			left: 0;
			padding: 0 40rpx 10rpx;
			z-index: 9;
		}
	}



	.btn-style {
		border-radius: 50px;
		background: $color-yel2;
		color: $uni-text-color-inverse;
		border-color: $color-yel2;

		&:after {
			border-color: $color-yel2;
		}
	}

	.btn-style2 {
		border-radius: 50px;
		// f55545
		background: $color-red;
		color: $uni-text-color-inverse;
		border-color: $color-red;

		&:after {
			border-color: $color-red;
		}
	}

	.btn-style3 {
		border-radius: 50px;
		// f55545
		background: $color-blue2;
		color: $uni-text-color-inverse;
		border-color: $color-blue2;
		box-shadow: 0px 6rpx 40rpx 0px rgba(33, 160, 255, 0.35);

		&:after {
			border-color: $color-blue2;
		}
	}

	.comment-link {
		border-top: 1px solid $uni-border-color;
		padding: 26rpx 0;
		text-align: center;
		color: #666;

		text {
			font-size: 13px;
			margin-right: 5px;
		}
	}

	.popup {
		position: relative;

		.bgimg {
			width: 100%;
			height: 240rpx;
			position: absolute;
			left: 0;
			top: 0;
			z-index: 1;
		}

		.content {
			position: relative;
			z-index: 2;
		}
	}

	.canbig {
		position: fixed;
		top: 5%;
		left: 15%;
		width: 70%;
		z-index: 9999;

		.big {
			width: 100%;
			height: 800rpx;
		}
	}

	.canvas-popup {
		.canflex {
			display: flex;
			justify-content: center;
			padding: 40rpx 0 0;

			.item {
				display: inline-block;
				border-radius: 6px;
				border: 3px solid #f4f4f4;
				position: relative;
				margin: 0 5px;

				&.active {
					border-color: $color-yel2;

					.icons {
						opacity: 1;
					}
				}
			}

			.icons {
				position: absolute;
				left: 30rpx;
				top: 0;
				opacity: 0;
				transform: translate(0, -100%);
			}

			.icon {
				width: 14px;
				height: 20px;
				display: block;
			}

			.canimg {
				width: 130rpx;
				height: 160rpx;
				border-radius: 4px;
				display: block;
			}
		}

		.btnbox {
			padding: 20rpx 30rpx;
		}
	}

	.seltit {
		padding: 20rpx 50rpx;
		font-size: 14px;
		font-weight: bold;
	}

	.fixed-btn {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		background: $uni-bg-color;
		padding: 20rpx 30rpx;
		box-shadow: 0 0 20px #eee;

		.left {
			font-size: 14px;
		}

		.right {
			width: 50%;
		}

		.flex {
			justify-content: space-between;
			align-items: center;
		}
	}

	.col-red {
		color: $color-red;
	}

	.col-blue {
		color: $color-blue;
	}

	.-mlr-30 {
		margin-left: -30rpx;
		margin-right: -30rpx;
	}

	.notdatas {
		text-align: center;

		.icon {}
	}


	.btnbox.fixed {
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 99;
		width: 100%;
		padding: 20rpx 30rpx;
		background: #F8FAFD;
		;
	}


	.order-list {
		padding: 20rpx 30rpx;

		.order-item {
			background: #fff;
			margin-bottom: 20rpx;
			border-radius: 12px;
			padding: 0 30rpx;
		}

		.order-head {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 5px 0;
		}

		.order-foot {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx 0;

			.left {
				font-size: 14px;

				text {
					color: $color-red;
					font-size: 16px;
				}
			}

			.icon {
				width: 20px;
				height: 20px;
			}
		}

		.btnbox {}

		.return-left {
			display: flex;
			align-items: center;
		}

		.desc-i {
			font-size: 12px;
			display: flex;
			align-items: center;
		}
	}

	.form-item-info {
		text-align: right;
		width: 100%;
	}

	.form-text {
		color: #2C2C2C;
		font-size: 13px;
	}

	page {
		/* #ifdef APP-PLUS */
		background: $uni-bg-color-grey;
		/* #endif */
	}

	.popup-wrap {
		text-align: center;

		.title {
			padding: 48rpx 0 26rpx;
			font-size: 16px;
			font-weight: bold;
		}

		.int {
			padding: 0 48rpx 50rpx;

			input {
				background: #F8FAFD;
				height: 42px;
				font-size: 14px;
			}
		}

		.btnbox {
			display: flex;
			width: 100%;
			border-top: 1px solid #ddd;

			.btn-item {
				width: 50%;
				height: 50px;
				line-height: 50px;
				border-right: 1px solid #ddd;
				font-size: 15px;

				&:nth-last-child(1) {
					border: 0;
				}
			}

			.confirm {
				color: $color;
			}
		}

		.content {
			padding: 0 36rpx 30rpx;
		}

		.int-item {
			display: flex;
			align-items: center;
			color: $color;
			padding: 10rpx 0;
			text-align: left;

			.name {
				width: 60px;
				font-size: 16px;
			}
		}

		.input-item {
			flex: 1;
			display: flex;
			background: #F8FAFD;
			align-items: center;
			padding: 0 10px;
			border-radius: 8px;
			overflow: hidden;

			.input {
				height: 40px;
				flex: 1;
				font-size: 14px;
			}
		}
	}


	.u-calendar__content {
		.u-calendar__content__item {
			padding: 1px 0 !important;
		}
	}

	.goods-list {
		padding: 10rpx 30rpx;

		.item {
			display: flex;
		}

		.text {
			margin-bottom: 10rpx;
		}

		.info {
			flex: 1;
			padding-left: 20rpx;
			width: 440rpx;
		}

		.price {
			font-size: 14px;
			color: $color-red;

			text {
				font-size: 20px;
			}
		}

		.name {
			font-size: 16px;
			height: 60rpx;
			line-height: 60rpx;
			font-weight: bold;
		}

		.text {
			font-size: 14px;
			line-height: 1.6;
		}

		.btnbox {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.btns {
				width: 200rpx;
			}
		}
	}

	.-mlr-32rpx {
		margin: 0 -32rpx;
	}

	.col {
		color: $color;
	}
</style>